<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位父元素不为视口-定位研究</title>
    <style>
        .assistor {
            position: relative;
            /*关键点*/
            display: block;
            width: 500px;
            height: 300px;
            margin: 100px auto 0 auto;
            background-color: pink;
        }

        .parent {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            overflow: auto;
            /*关键点*/
        }

        .child {
            position: absolute;
            /*关键点*/
            width: 120px;
            height: 120px;
            margin: 100px 50px;
            background-color: #333;
        }

        .placeholder {
            width: 1000px;
            height: 1000px;
        }

        .fu {
            height: 400px;
            width: 600px;
            background-color: skyblue;
            border: 1px solid #000;
            position: relative;
            overflow: auto; 
            /* overflow: hidden; */
            /* overflow; */
        }
        .zi{
            height: 800px;
            width:300px;
            background-color:red;
        }
        .dw{
            position: absolute;
            width:30px;
            height: 30px;
            background-color:purple;
            bottom:50px;
            left:10px;
        }
    </style>
</head>

<body>
    <!-- 放开这个即可看见固定定位效果 -->
    <!-- <div class="assistor">
        <div class="parent">
            <div class="child"></div>
            <div class="placeholder"></div>
        </div>
    </div> -->

    <div class="fu">
        <div class="dw"></div>
        <div class="zi"></div>
    </div>

    <!-- 总结：
        1：子元素高度超出父元素时，默认行为是会超出父元素，overflow属性不写
        2：设置overflow属性为隐藏或者auto,可将子元素内容限制在父元素之内
        3：固定定位父元素默认为视口body元素，通过子绝父相模拟固定定位
           assistor:祖先元素宽高固定,且不写overflow属性
           parent:父元素宽高与assistor一致，但为了让内容可以滑动，需要设置overflow为auto
           placehold:即为我们放置内容的区域
           child:设置其定位为绝对定位，相对于祖先元素，由于祖先元素宽高固定，child将不会滑动
     -->
</body>

</html>